import { useState, useEffect } from "react";
import { Form, Input, Alert, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { updateInventoryWarn } from "../service";

const PurchaseOrderModal = ({ visible, query, selectedKeys, fetchList, selectedRows, handleCancel }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		if (selectedRows.length == 1) {
			form.setFieldValue("lowWarn", selectedRows[0].lowWarnValue);
			form.setFieldValue("highWarn", selectedRows[0].highWarnValue);
		} else {
			if (visible) {
				form.resetFields();
			}
		}
	}, [visible]);
	const onOk = () => {
		form.validateFields().then(async value => {
			const { success } = await updateInventoryWarn({
				highWarn: value.highWarn,
				lowWarn: value.lowWarn,
				skuIdList: selectedKeys
			});
			if (success) {
				message.success("操作成功");
				onCancel();
				fetchList();
			}
			setLoading(false);
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	return (
		<CommonModal title={{ title: "设置预警值" }} visible={true} onOk={onOk} onCancel={onCancel} minHeight="150px">
			<Form form={form} name="mark-unuaual-modal">
				<Alert
					showIcon
					message={
						<Typography as="s1">低预警值：当正品实际数量小于等于低预警值时，会显示红色预警提示，防止库存不足超卖</Typography>
					}
				/>
				<Form.Item
					name="lowWarn"
					style={{ marginTop: 16 }}
					rules={[
						{
							pattern: /^[1-9]\d*$/g,
							message: "请输入正整数"
						}
					]}
				>
					<Input placeholder="请输入低预警值" />
				</Form.Item>
				<Alert
					showIcon
					message={<Typography as="s1">高预警值：当正品实际数量大于高预警值时， 会显示黄色预警提示，防止货品积压</Typography>}
				/>
				<Form.Item
					name="highWarn"
					style={{ marginTop: 16 }}
					rules={[
						{
							pattern: /^[1-9]\d*$/g,
							message: "请输入正整数"
						}
					]}
				>
					<Input placeholder="请输入高预警值" />
				</Form.Item>
			</Form>
		</CommonModal>
	);
};

export default PurchaseOrderModal;
